<template>
    <div id="Lv3_homework">
        <div id="navi">
            
            <el-radio-group   v-model=" radio1">
                <el-radio label="1" size="large">全部</el-radio>
                <el-radio label="2" size="large">进行中</el-radio>
                <el-radio label="3" size="large">已结束</el-radio>
                <el-radio label="4" size="large">未开始</el-radio>
            </el-radio-group>
        </div>
        <div id="homework">
          <div>
            
           
            <el-divider></el-divider>
          </div>

          <div id="workList">
            <el-table :data="tableData" stripe style="width: 100%;text-align: center;">
                 <el-table-column prop="title" label="作业名称"  />
                 <el-table-column prop="startTime" label="开始时间"  />
                 <el-table-column prop="endingTime" label="截止时间" />
                 <el-table-column prop="status" label="状态" />
                 <el-table-column  label="操作">
                    <template #default>
                        <el-button link type="primary" size="small">批阅</el-button>
                    </template>
                 </el-table-column>
            </el-table>
           

          </div>
          <el-button style="margin: 10px;">创建作业</el-button>

        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
 const radio1 = ref('1')
 const tableData = [
  {
    title: '第一次作业',
    startTime: '2023-01-01 10:00:00',
    endingTime: '2023-01-01 16:00:00',
    status:'已结束',
    operition:'批阅'
  },
  {
    title: '第一次作业',
    startTime: '2023-01-01 10:00:00',
    endingTime: '2023-01-01 16:00:00',
    status:'进行中',
    operition:'批阅'
  },
  {
    title: '第一次作业',
    startTime: '2023-01-01 10:00:00',
    endingTime: '2023-01-01 16:00:00',
    status:'进行中',
    operition:'批阅'
  },
  {
    title: '第一次作业',
    startTime: '2023-01-01 10:00:00',
    endingTime: '2023-01-01 16:00:00',
    status:'未开始',
    operition:'批阅',
  },
]
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#lv3_homework{
    width:1112px;
   
}

#navi{
width: 1112px;
position: relative;
height: 40px;

color: #fff;
line-height: 40px;
}

#addWork{
    position: relative;
    left: 30px;
}

.el-radio-group{
    position: relative;
    left: 10px;
    .el-radio{
        margin-left: 10px;
    }
}


#workList{
    width: 1112px;
    
    background-color: rgb(255, 255, 255);
    

    .work{
        position: relative;
        top: 15px;
        left: 15px;
        width: 1305px;
        height: 100px;
        background-color: rgb(255, 255, 255);
        margin-bottom: 15px;
        
      

        .title{
            position: relative;
           
           
        }

        .el-link{
            font-size: 16px;
        }
        .class{
            position: relative;
            top: 15px;
            font-size: 12px;
        }

        .time{
            position: relative;   
            color: rgb(154, 154, 154);
            font-size: 12px;
            top: 30px;
        }

       
        .delete{
            position: relative;
            left: 1220px;
            top: -35px;
        }
        .complete{
            position: relative;
            left: 1100px;
            font-size: large;
            top: -10px;
        }
    }
}
</style>